<template>
  <div
    class="search-content"
    :style="{ top: GLOBAL.currentEnvironment ? '0' : '' }"
  >
    <!-- <Navbar :appTitle="title" :rtitle="rtitle" :rname="rname" /> -->
    <Search
      ref="topSearch"
      class="search"
      placeholder="客户编号|客户名称"
      :isAdd="false"
      :isScreen="false"
      :isType="false"
    >
    </Search>
    <div class="formgroup">
      <!--  -->
      <span class="title">客户编号</span>
      <van-field v-model="params.customCode" label="" placeholder="请输入" />
      <div class="bottomLine"></div>

      <!--  -->
      <span class="title">客户名称</span>
      <van-field v-model="params.customName" label="" placeholder="请输入" />
      <div class="bottomLine"></div>

      <!--  -->
      <span class="title">创建人</span>
      <van-field
        :is-link="!createdByName"
        readonly
        name="picker"
        v-model="createdByName"
        @click="ddthrVisible = true"
        placeholder="请选择"
      >
        <div
          slot="right-icon"
          v-show="!!createdByName"
          @click.stop="confirmDdtjr('', '', true)"
        >
          <img
            src="~@/assets/img/filedClear.png"
            alt=""
            class="filedClear-width"
          />
        </div>
      </van-field>
      <div class="bottomLine"></div>

      <!--  -->
      <span class="title">更新人</span>
      <van-field
        :is-link="!updateByName"
        readonly
        name="picker"
        v-model="updateByName"
        @click="ddthrVisible2 = true"
        placeholder="请选择"
      >
        <div
          slot="right-icon"
          v-show="!!updateByName"
          @click.stop="confirmDdtjr2('', '', true)"
        >
          <img
            src="~@/assets/img/filedClear.png"
            alt=""
            class="filedClear-width"
          />
        </div>
      </van-field>
      <div class="bottomLine"></div>

      <!--  -->
      <span class="title">更新时间</span>
      <van-field
        :is-link="!promiseDateRead"
        readonly
        name="picker"
        @click="promiseDateStartVisible = true"
        placeholder="请选择"
        v-model="promiseDateRead"
      >
        <div
          slot="right-icon"
          v-show="!!promiseDateRead"
          @click.stop="cancelPromiseStartTime"
        >
        <img
            src="~@/assets/img/filedClear.png"
            alt=""
            class="filedClear-width"
          />
        </div>
      </van-field>
      <div class="bottomLine"></div>

      <!--  -->
      <span class="title">创建时间</span>
      <van-field
        :is-link="!createdTimeRead"
        readonly
        name="picker"
        v-model="createdTimeRead"
        @click="createdTimeBeginVisible = true"
        placeholder="请选择"
      >
        <div
          slot="right-icon"
          v-show="!!createdTimeRead"
          @click.stop="cancelCreatedStartTime"
        >
          <img
            src="~@/assets/img/filedClear.png"
            alt=""
            class="filedClear-width"
          />
        </div>
      </van-field>
      <!-- <div class="bottomLine"></div> -->
    </div>
    <div class="search-bottom">
      <span class="btncancel" @click="cancel">重置</span>
      <span class="btnconfirm" @click="confirm">确定</span>
    </div>

    <!--更新开始时间 -->
    <van-popup
      v-model="promiseDateStartVisible"
      position="bottom"
      :close-on-click-overlay="false"
    >
      <van-datetime-picker
        @confirm="confirmPromiseStartTime"
        @cancel="cancelPromiseStartTime"
        type="date"
        title="更新时间"
        v-model="minDate1"
        :formatter="formatter"
      />
    </van-popup>
    <!--更新结束时间 -->
    <van-popup
      v-model="promiseDateEndVisible"
      position="bottom"
      :close-on-click-overlay="false"
    >
      <van-datetime-picker
        @confirm="confirmPromiseEndTime"
        @cancel="cancelPromiseEndTime"
        type="date"
        title="更新时间"
        :min-date="promiseEndMinDate"
        :formatter="formatter"
      />
    </van-popup>

    <!--创建开始时间 -->
    <van-popup
      v-model="createdTimeBeginVisible"
      position="bottom"
      :close-on-click-overlay="false"
    >
      <van-datetime-picker
        @confirm="confirmCreatedStartTime"
        @cancel="cancelCreatedStartTime"
        type="date"
        title="创建时间"
        v-model="minDate1"
        :formatter="formatter"
      />
    </van-popup>
    <!--创建结束时间 -->
    <van-popup
      v-model="createdTimeEndVisible"
      position="bottom"
      :close-on-click-overlay="false"
    >
      <van-datetime-picker
        @confirm="confirmCreatedEndTime"
        @cancel="cancelCreatedEndTime"
        type="date"
        title="创建时间"
        :min-date="createEndMinDate"
        :formatter="formatter"
      />
    </van-popup>

    <!-- 创建人 -->
    <contact-pickers
      :visible="ddthrVisible"
      :max="5"
      @closePicker="ddthrVisible = false"
      @confirm="confirmDdtjr"
    >
    </contact-pickers>

    <!-- 更新人 -->
    <contact-pickers
      :visible="ddthrVisible2"
      :max="5"
      @closePicker="ddthrVisible2 = false"
      @confirm="confirmDdtjr2"
    >
    </contact-pickers>
  </div>
</template>

<script>
const formP = {
  customCode: "",
  customName: "",
  createBys: "",
  updateBys: "",
  // status: 0,
  // chargeUserId: "", //生产负责人ID
  // craftName: "",
  // createdBy: "",
  // 更新时间
  updateTimeBegin: "",
  createTimeEnd: "",
  // 创建时间
  createTimeBegin: "",
  createTimeEnd: "",
};
import Navbar from "@/components/navBar/navBar_right";
import ContactPickers from "@/components/choiceuse/ContactPickers";
import upload from "@/components/upload/upload";
import moment from "moment";
import Search from "@/components/search";
export default {
  name: "search",
  components: { Navbar, ContactPickers, upload, Search },
  data() {
    return {
      title: this.$route.meta.title,
      fzrVisible: false,
      ddthrVisible: false,
      ddthrVisible2: false,
      promiseDateStartVisible: false,
      promiseDateEndVisible: false,
      createdTimeBeginVisible: false,
      createdTimeEndVisible: false,
      fzrName: "", //生产负责人
      createdByName: "", //订单提交人
      updateByName: "",
      rtitle: "",
      rname: "", //search
      minDate1: new Date(),
      minDate2: new Date(),
      createEndMinDate: new Date(2020, 1, 1),
      promiseEndMinDate: new Date(2020, 1, 1),
      maxDate: new Date(2025, 10, 1),
      params: {},
      createdTimeRead: "",
      promiseDateRead: "",
    };
  },
  props: {
    keyword: {
      type: String,
      default: "",
    },
  },
  watch: {
    keyword(newVal) {
      this.$refs.topSearch.value = newVal;
    },
  },
  computed: {},
  mounted() {},
  created() {},
  methods: {
    fileChange(ids) {
      console.log("父组件" + ids);
    },
    // 选择更新时间开始时间
    confirmPromiseStartTime(date) {
      this.promiseEndMinDate = date;
      this.params.updateTimeBegin = moment(date)
        .startOf("day")
        .format("YYYY-MM-DD 00:00:00");
      this.params.updateTimeEnd = ""; // 切换开始时间后直接置空结束时间重新选择
      this.promiseDateStartVisible = false;
      this.promiseDateEndVisible = true;
      this.promiseDateRead = moment(date).format("YYYY-MM-DD");
    },
    // 取消更新时间开始时间
    cancelPromiseStartTime() {
      this.params.updateTimeBegin = "";
      this.params.updateTimeEnd = "";
      this.promiseDateRead = "";
      this.promiseDateStartVisible = false;
    },
    // 选择更新时间结束时间
    confirmPromiseEndTime(date) {
      this.params.updateTimeEnd = moment(date)
        .endOf("day")
        .format("YYYY-MM-DD 23:59:59");
      this.promiseDateRead =
        this.promiseDateRead + "~" + moment(date).format("YYYY-MM-DD");
      this.promiseDateEndVisible = false;
    },
    // 取消更新时间结束时间
    cancelPromiseEndTime() {
      this.params.updateTimeBegin = "";
      this.params.updateTimeEnd = "";
      this.promiseDateRead = "";
      this.promiseDateEndVisible = false;
    },

    //     // ==================================================
    // 选择订单提交开始时间
    confirmCreatedStartTime(date) {
      this.createEndMinDate = date;
      this.params.createTimeBegin = moment(date)
        .startOf("day")
        .format("YYYY-MM-DD 00:00:00");
      this.params.createTimeEnd = ""; // 切换开始时间后直接置空结束时间重新选择
      this.createdTimeBeginVisible = false;
      this.createdTimeEndVisible = true;
      this.createdTimeRead = moment(date).format("YYYY-MM-DD");
    },
    // 取消订单提交开始时间
    cancelCreatedStartTime() {
      this.params.createTimeBegin = "";
      this.params.createTimeEnd = "";
      this.createdTimeRead = "";
      this.createdTimeBeginVisible = false;
    },
    // 选择订单提交结束时间
    confirmCreatedEndTime(date) {
      this.params.createTimeEnd = moment(date)
        .startOf("day")
        .format("YYYY-MM-DD 23:59:59");
      this.createdTimeRead =
        this.createdTimeRead + "~" + moment(date).format("YYYY-MM-DD");
      this.createdTimeEndVisible = false;
    },
    // 取消订单提交结束时间
    cancelCreatedEndTime() {
      this.params.createTimeBegin = "";
      this.params.createTimeEnd = "";
      this.createdTimeRead = "";
      this.createdTimeEndVisible = false;
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      if (type === "hour") {
        return val + "时";
      }
      if (type === "minute") {
        return val + "分";
      }
      return val;
    },
    chooseUser() {
      this.fzrVisible = true;
    },
    confirmChooseUsers(val, selectedList, judge) {
      this.params.chargeUserId = "";
      this.fzrName = "";
      if (judge) {
        this.fzrVisible = false;
        return;
      }
      this.params.chargeUserId = val ? val : ""; //人员id
      let arr = [];
      if (selectedList) {
        selectedList.forEach((item) => {
          arr.push(item.realname);
        });
      }
      this.fzrName = arr.join(",");
      this.fzrVisible = false;
    },
    confirmDdtjr(val, selectedList, judge) {
      this.params.createBys = "";
      this.createdByName = "";
      if (judge) {
        this.ddthrVisible = false;
        return;
      }
      this.params.createBys = val ? val : ""; //人员id
      let arr = [];
      if (selectedList) {
        selectedList.forEach((item) => {
          arr.push(item.realname);
        });
      }
      this.createdByName = arr.join(",");
      this.ddthrVisible = false;
    },
    confirmDdtjr2(val, selectedList, judge) {
      this.params.updateBys = "";
      this.updateByName = "";
      if (judge) {
        this.ddthrVisible2 = false;
        return;
      }
      this.params.updateBys = val ? val : ""; //人员id
      let arr = [];
      if (selectedList) {
        selectedList.forEach((item) => {
          arr.push(item.realname);
        });
      }
      this.updateByName = arr.join(",");
      this.ddthrVisible2 = false;
    },
    cancel() {
      this.createdByName = "";
      this.updateByName = "";
      this.createdTimeRead = "";
      this.promiseDateRead = "";
      this.$refs.topSearch.value = "";
      this.minDate1 = new Date();
      this.minDate2 = new Date();
      this.params = Object.assign({}, formP);
      // this.$emit("resetCategory");
    },
    confirm() {
      var keyword = this.$refs.topSearch.value;
      this.$emit("getCategory", this.params, keyword);
    },
  },
};
</script>
<style lang="scss" scoped>
.filedClear-width {
  width: 32px;
}

.search-content {
  //  padding-bottom: 0.5rem;
  position: fixed;
  top: 70px;
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  z-index: 99;

  .formgroup {
    // height: calc(100vh - 1.11rem);
    // padding-bottom: 106px;
    overflow-y: scroll;
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-top: 20px;
    margin-bottom: 40px;
    padding-top: 20px;

    .title {
      width: 116px;
      height: 28px;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 10px;
      margin-left: 32px;
    }
  }

  .search-bottom {
    height: 100px;
    width: 100%;
    background: #ffffff;
    // background: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 22px;
    font-size: 32px;

    .btnconfirm {
      width: 344px;
      height: 78px;
      background: #1890ff;
      color: #fff;
      border-radius: 6px;
      text-align: center;
      line-height: 78px;
    }

    .btncancel {
      width: 344px;
      height: 78px;
      background: #f6f6f6;
      color: #191f25;
      // border: 0.01px solid rgba(25, 31, 37, 0.12);
      border-radius: 6px;
      text-align: center;
      line-height: 78px;
    }
  }
}

.bottomLine {
  height: 2px;
  background-color: #f0f0f0;
  margin: 0 32px 28px;
}
</style>
